<%--
  Created by IntelliJ IDEA.
  User: zheng
  Date: 2021/7/1
  Time: 11:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>芜湖起飞 - 随心选座</title>
  <link rel="icon" type="image/png" sizes="16px" href="${pageContext.request.contextPath}/statics/images/icon.png"/>
  <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/jquery.seat-charts.css">
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/seat-select.css"/>
</head>

<body>
<div class="container-fluid">
  <div class="row bg">
    <!-- 侧边栏 -->
    <div class="sidebar col-lg-2">
      <img src="${pageContext.request.contextPath}/image/icon-big.png" width="200px" class="img-responsive center-block" />
      <ul id="main-nav" class="nav nav-tabs nav-stacked">
        <li><a href="${pageContext.request.contextPath}/features/doing/meals">自主选餐</a></li>
        <li><a href="${pageContext.request.contextPath}/features/doing/seat">随心选座</a></li>
        <li><a href="${pageContext.request.contextPath}/features/center">个人信息</a></li>
        <li><a href="${pageContext.request.contextPath}">返回首页</a></li>
      </ul>
      <p class="welcome text-center">欢迎您，${sessionScope.user.user_phone}<br />
        您的机票单号为：${ticket.fo_no}</p>
    </div>

    <div class="demo">

      <!-- 座位表 -->
      <div id="seat-map" class="seatmap col-lg-offset-1 col-lg-6">
        <div class="front">飞机前端</div>
      </div>

      <!-- 右侧信息栏 -->
      <div class="booking-details col-lg-offset-6">
        <p>航班号：${ticket.fo_flight.flight_no}<span></span></p>
        <p>起飞时间：${ticket.fo_flight.flight_time}<span></span></p>
        <p>选座类型:
          <select onchange="recomSeat()" id="type">
            <option value="none">无</option>
            <option value="window">靠窗座位</option>
            <option value="passrode">靠过道座位</option>
          </select>
        </p>
        <table class="info">
          <colgroup>
            <col style="background-color: #caefff;width:100px;" />
          </colgroup>
          <tr>
            <th>座位</th>
            <td><ul id="selected-seats"></ul></td>
          </tr>
          <tr>
            <th>票数</th>
            <td><span id="counter">0</span></td>
          </tr>
          <tr>
            <th>总计</th>
            <td><b>￥<span id="total">0</span></b></td>
          </tr>
        </table>
        <button class="checkout-button" onclick="submitSeat()">确定购买</button>
        <div id="legend"></div>
        <div style="clear:both"></div>
      </div>

    </div>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.seat-charts.js"></script>
    <script type="text/javascript" src ="${pageContext.request.contextPath}/js/seat-select.js"></script>
</body>
<script>
  function getName() {
    price = ${ticket.fo_flight.flight_price}
  }
  function loadStop(sc) {
    <c:forEach items="${stop}" var="seat">
      sc.get('${seat.so_seat_no_row}_${seat.so_seat_no_col}').status('unavailable');
    </c:forEach>
  }
</script>

</html>
